<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no,initial-scale=1.0"/>
    <title>中汇财经</title>
    <link rel="stylesheet" type="text/css" href="css/styleUI.css">
    <link rel="stylesheet" type="text/css" href="css/style.css">
    <link rel="stylesheet" type="text/css" href="css/swiper-3.4.2.min.css">
    <link rel="stylesheet" type="text/css" href="droploaddist/dropload.css">
</head>
<body>
<div id="page" class="uf uf-ver">
    <div id="header" class="uf uf-ac uf-pja">
        <a href="index.html" class="nav active">晨报</a>
        <a href="index2.html" class="nav">精研</a>
        <a href="index3.html" class="nav">抓涨停</a>
        <a href="index4.html" class="nav">晒战绩</a>
    </div>

    <div id="container" class="uf-f u-scroll">
        <!-- 轮播图 -->
        <div class="swiper-container">
            <div class="swiper-wrapper">
                <div class="swiper-slide"><img class="banner mT" src="image/static/banner_index_1.jpg"></div>
            </div>
            <!--<div class="swiper-pagination"></div>-->
        </div>

        <div id="listDiv">
            <a href="articleTxt.html" data-id="" class="li news ub">
                <div class="img ub ub-ac ub-pc">
                    <img src="image/static/demoPic2.jpg">
                </div>
                <div class="ub-f uf uf-ver uf-pj">
                    <div class="title ub ub-ver">博弈行情博弈行情博弈行情博弈行情，博弈行情博弈行情博弈行情博弈行情</div>
                    <div class="text ub ub-ver">
                        今天涨幅榜第一名的是近期新低这么小的可爱的你在哪，我的心好慌，我去么小的可爱的你在哪，我的心好慌，我去么小的可爱的你在哪，我的心好慌，我去
                    </div>
                    <div class="ub ub-ac census">
                        <div class="time ub-f">2017-06-08</div>
                        <div class="goodNum">58</div>
                        <div class="readNum">518</div>
                    </div>
                </div>
            </a>
            <a href="articleTxt.html" data-id="" class="li news ub">
                <div class="img ub ub-ac ub-pc">
                    <img src="image/static/demoPic2.jpg">
                </div>
                <div class="ub-f uf uf-ver uf-pj">
                    <div class="title ub ub-ver">博弈行情博弈行情博弈行情博弈行情，博弈行情博弈行情博弈行情博弈行情</div>
                    <div class="text ub ub-ver">
                        今天涨幅榜第一名的是近期新低这么小的可爱的你在哪，我的心好慌，我去么小的可爱的你在哪，我的心好慌，我去么小的可爱的你在哪，我的心好慌，我去
                    </div>
                    <div class="ub ub-ac census">
                        <div class="time ub-f">2017-06-08</div>
                        <div class="goodNum">58</div>
                        <div class="readNum">518</div>
                    </div>
                </div>
            </a>
            <a href="articleTxt.html" data-id="" class="li news ub">
                <div class="img ub ub-ac ub-pc">
                    <img src="image/static/demoPic2.jpg">
                </div>
                <div class="ub-f uf uf-ver uf-pj">
                    <div class="title ub ub-ver">博弈行情博弈行情博弈行情博弈行情，博弈行情博弈行情博弈行情博弈行情</div>
                    <div class="text ub ub-ver">
                        今天涨幅榜第一名的是近期新低这么小的可爱的你在哪，我的心好慌，我去么小的可爱的你在哪，我的心好慌，我去么小的可爱的你在哪，我的心好慌，我去
                    </div>
                    <div class="ub ub-ac census">
                        <div class="time ub-f">2017-06-08</div>
                        <div class="goodNum">58</div>
                        <div class="readNum">518</div>
                    </div>
                </div>
            </a>
            <a href="articleTxt.html" data-id="" class="li news ub">
                <div class="img ub ub-ac ub-pc">
                    <img src="image/static/demoPic2.jpg">
                </div>
                <div class="ub-f uf uf-ver uf-pj">
                    <div class="title ub ub-ver">博弈行情博弈行情博弈行情博弈行情，博弈行情博弈行情博弈行情博弈行情</div>
                    <div class="text ub ub-ver">
                        今天涨幅榜第一名的是近期新低这么小的可爱的你在哪，我的心好慌，我去么小的可爱的你在哪，我的心好慌，我去么小的可爱的你在哪，我的心好慌，我去
                    </div>
                    <div class="ub ub-ac census">
                        <div class="time ub-f">2017-06-08</div>
                        <div class="goodNum">58</div>
                        <div class="readNum">518</div>
                    </div>
                </div>
            </a>
            <a href="articleTxt.html" data-id="" class="li news ub">
                <div class="img ub ub-ac ub-pc">
                    <img src="image/static/demoPic2.jpg">
                </div>
                <div class="ub-f uf uf-ver uf-pj">
                    <div class="title ub ub-ver">博弈行情博弈行情博弈行情博弈行情，博弈行情博弈行情博弈行情博弈行情</div>
                    <div class="text ub ub-ver">
                        今天涨幅榜第一名的是近期新低这么小的可爱的你在哪，我的心好慌，我去么小的可爱的你在哪，我的心好慌，我去么小的可爱的你在哪，我的心好慌，我去
                    </div>
                    <div class="ub ub-ac census">
                        <div class="time ub-f">2017-06-08</div>
                        <div class="goodNum">58</div>
                        <div class="readNum">518</div>
                    </div>
                </div>
            </a>


        </div>

    </div>

    <div id="footer" class="uf">
        <a href="index.html" class="uf-f uf uf-ae uf-pc active">判大势</a>
        <a href="plot.html" class="uf-f uf uf-ae uf-pc">牛布局</a>
        <a href="liveVideo.html" class="uf-f uf uf-ae uf-pc">观直播</a>
        <a href="about.html" class="uf-f uf uf-ae uf-pc">寻合作</a>
    </div>

</div>
<script type="text/javascript" src="js/zepto.min.js"></script>
<script type="text/javascript" src="js/swiper-3.4.2.jquery.min.js"></script>
<script type="text/javascript" src="droploaddist/dropload.min.js"></script>
<script type="text/javascript">
    $(document).ready(function () {
        swipeInit();
        droploadInit();
    });

    //轮播图初始化
    function swipeInit() {
        new Swiper('.swiper-container', {
            pagination: '.swiper-pagination',//分页器（小点）
            paginationClickable: true,//分页器是否可点击
            autoplay: 3000,//自动轮播，毫秒数
            autoplayDisableOnInteraction: false,//用户手动操作后，是否停止自动轮播
//            loop: true,//环路
            touchRatio: 0.5,//触摸距离与slide滑动距离的比率,默认：1,设置为0.5后slide滑动距离只有触摸距离的一半，降低滑动灵敏度
            lazyLoading: true,//允许图片的懒加载
            lazyLoadingInPrevNext: true,//允许将图片的懒加载应用到最接近的slide的图片（前一个和后一个slide）
            lazyLoadingOnTransitionStart: true,//图片的懒加载在过渡一开始就加载
            observer: true,//当Swiper元素变化时，例如window.resize，Swiper更新
            observeParents: true//当Swiper的父元素变化时，例如window.resize，Swiper更新
        });
    }

    function droploadInit() {
        //上下拉刷新的区域
        var $scrollArea = $('#container');
        var $dropDiv = $('#listDiv');
        $dropDiv.dropload({
            scrollArea: $scrollArea,//滚动条滑动的区域
            threshold: 50,
            loadUpFn: function (me) {
                //刷新整个页面
                window.location.reload();
                setTimeout(function () {
                    me.resetload();
                }, 500);
            },
            loadDownFn: function (me) {
                var $last = $dropDiv.find(".li").last();//最后一条元素
                var lastId = $last.data("id");//最后一条元素的data-id
                if (!lastId) {
                    //如果不存在last_id
                    me.lock();// 锁定
                    me.noData();// 无数据
                    me.resetload();// 重置页面刷新状态
                    return;
                }
                var url = "";
                $.ajax({
                    type: "post",
                    url: url,
                    data: {
                        last: lastId
                    },
                    success: function (ret) {
                        var listHtml = ret;//返回的html列表
                        if (listHtml && listHtml.length) {
                            //一定时间显示加载效果
                            setTimeout(function () {
                                // 在页面最后一条之后插入新的html数据
                                $last.after(listHtml);
                                // 每次数据插入，必须重置
                                me.resetload();
                            }, 300);
                        } else {
                            me.lock();// 锁定
                            me.noData();// 无数据
                            me.resetload();// 重置页面刷新状态
                        }
                    },
                    error: function (xhr, type) {
                        me.lock();// 锁定
                        me.Err();// 出错了
                        me.resetload();// 即使加载出错，也得重置
                    }
                });
            }
        });
    }
</script>
</body>
</html>